<script lang="ts" setup>
import type { FormInstance } from 'element-plus'

import { Delete, Plus } from '@element-plus/icons-vue'
import { couponDetail, createCoupon, getBusinessBlocksList, getMemberLevel, getProjects, updateCoupon } from '@fl/api/anjutong'
import { cloneDeep } from 'lodash-es'
import { useRoute, useRouter } from 'vue-router'

import type { InitForm, LevelList } from '../type'

const { go, push: routerPush } = useRouter()
const route = useRoute()
const isCopy = route.params.type === 'copy'
const isEdit = route.params.type === 'edit'

const detailFormRef = ref()
const initForm: InitForm = {
    amCouponProjectList: [], // 所选的项目
    amountThreshold: undefined, // 使用门槛金额(订单满多少元可用)
    couponDescription: '', // 优惠券描述
    couponName: '', // 优惠券名称
    discountAmount: undefined, // 优惠金额
    effectiveDuration: undefined, // 有效时长（领取后多少天内可用）
    endTime: undefined, // 有效期止
    expiredNotice: 1, // 过期提醒（1-不提醒 2-临期提醒）
    getCouponCount: undefined, // 单次领取数量（每个账号最多可领取多少张）
    id: route.params.id,
    levelCover: 1, // 领取等级（1-全部 2-部分）
    levelThreshold: undefined, // 会员等级
    noticeThreshold: undefined, // 提醒触发间隔天（距离到期前多少天提醒）
    offerDescription: '', // 优惠说明
    plateIds: '', // 业务板块
    plateName: '',
    projectCover: 2, // 项目覆盖（1-全部 2-部分）
    projectId: [],
    quantity: 100000, // 发放数量
    receiveDescription: '', // 领取说明
    repeatedReceive: 1, // 领取数量（1无限制 0有数量）
    repeatedUse: 0, // 单次使用数量（0无限制 1有数量）
    serviceThreshold: 1, // 使用门槛（1-无门槛 2-满减）
    startTime: undefined, // 有效期始
    superimposed: undefined, // 是否叠加（0-否 1-是）
    term: 1, // 有效期（1有效期 2具体多少天）
    timeRange: [], // 有效期范围
    tradeScene: '', // 优惠类型
    usageTerm: [], // 使用须知
    useThreshold: undefined, // 重复使用张数上线（最多可使用多少张）
}
const needCopy = ref(true)
const businessModulesList: Ref<{ children: never[], disabled: boolean, label: string, value: number }[]> = ref([{ children: [], disabled: false, label: '请选择', value: 0 }])

const projectList = ref([])
const levelList: LevelList = ref([])
const selctProject: Ref<unknown[]> = ref([])
const detailForm = ref(cloneDeep(initForm))
const usageTermList = ref([{
    usageTerm: undefined,
}])
const detailRules = {
    amountThreshold: [
        { trigger: 'blur', validator: (rule: any, value: any, callback: any) => validHolder('str', detailForm.value.serviceThreshold, 2, value, callback) },
    ],
    couponDescription: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
    couponName: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
    discountAmount: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
    effectiveDuration: [
        { trigger: 'blur', validator: (rule: any, value: any, callback: any) => validHolder('str', detailForm.value.term, 2, value, callback) },
    ],
    getCouponCount: [
        { trigger: 'blur', validator: (rule: any, value: any, callback: any) => validHolder('str', detailForm.value.repeatedReceive, 0, value, callback) },
    ],
    levelCover: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
    levelThreshold: [
        { trigger: 'change', validator: (rule: any, value: any, callback: any) => validHolder('str', detailForm.value.levelCover, 2, value, callback) },
    ],
    noticeThreshold: [
        { message: '请输入', validator: (rule: any, value: any, callback: any) => validHolder('str', detailForm.value.expiredNotice, 2, value, callback) },
    ],
    offerDescription: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
    plateIds: [
        { message: '请选择', required: true, trigger: 'change' },
    ],
    projectCover: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
    projectId: [
        { trigger: 'change', validator: (rule: any, value: any, callback: any) => validHolder('arr', detailForm.value.projectCover, 2, value, callback) },
    ],
    quantity: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
    receiveDescription: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
    repeatedReceive: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
    repeatedUse: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
    serviceThreshold: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
    superimposed: [
        { message: '请选择', required: true, trigger: 'change' },
    ],
    term: [
        { message: '请选择', required: true, trigger: 'change' },
    ],
    timeRange: [
        { trigger: 'blur', validator: (rule: any, value: any, callback: any) => validHolder('arr', detailForm.value.term, 1, value, callback) },
    ],
    usageTerm: [
        { message: '请输入', required: true, trigger: 'blur' },
    ],
    useThreshold: [
        { trigger: 'blur', validator: (rule: any, value: any, callback: any) => validHolder('str', detailForm.value.repeatedUse, 1, value, callback) },
    ],
}

init()

/**
 * methods start
 */

// 获取板块列表
function init() {
    getBusinessModules()
    getProjectList()
    getMemberLevelList()
    if (isEdit || isCopy)
        getDetailData()
}

// 新增、编辑提交
function submitForm(formEl: FormInstance | undefined) {
    if (!formEl)
        return
    formEl.validate(async (valid) => {
        if (valid) {
            setProject(projectList.value, selctProject.value)
            const { amCouponProjectList, amountThreshold, couponDescription, couponName, discountAmount, effectiveDuration, expiredNotice, getCouponCount, id, levelCover, levelThreshold, noticeThreshold, offerDescription, plateIds, plateName, projectCover, quantity, receiveDescription, repeatedReceive, repeatedUse, serviceThreshold, superimposed, timeRange, tradeScene, useThreshold, startTime, endTime } = detailForm.value
            const usageTerm = usageTermList.value.map(val => val.usageTerm)
            const params = {
                amCouponProjectList,
                amountThreshold,
                couponDescription,
                couponName,
                discountAmount,
                effectiveDuration,
                endTime,
                expiredNotice,
                getCouponCount,
                id: isEdit ? id : undefined,
                levelCover,
                levelThreshold,
                needCopy: isCopy && needCopy.value ? true : undefined,
                noticeThreshold,
                offerDescription,
                plate: plateIds[0],
                plateLast: plateIds[1],
                plateName,
                projectCover,
                quantity,
                receiveDescription,
                repeatedReceive,
                repeatedUse,
                serviceThreshold,
                startTime,
                superimposed,
                tradeScene: '',
                usageTerm,
                useThreshold,
            }
            params.tradeScene = tradeScene?.replace(/\/$/, '')
            if (params.id) {
                params.amCouponProjectList = [] // 特殊：后端要求传[]，不影响详情回显
                updateCoupon(params).then(() => {
                    ElMessage.success('编辑成功')
                    routerPush({ name: 'coupon-manage' })
                })
            }
            else {
                createCoupon(params).then(() => {
                    ElMessage.success('新增成功')
                    routerPush({ name: 'coupon-manage' })
                })
            }
        }
    })
}

// 获取详情数据
function getDetailData() {
    couponDetail({
        id: route.params.id,
    }).then((res: InitForm) => {
        // 由于res里有很多前端用不到的字段，为了ts的清晰性，故而不能直接赋值给detailForm
        // detailForm.value = res
        const { amCouponProjectList, amountThreshold, couponDescription, couponName, discountAmount, effectiveDuration, endTime, expiredNotice, getCouponCount, id, levelCover, levelThreshold, noticeThreshold, offerDescription, plate, plateIds, plateLast, plateName, projectCover, quantity, receiveDescription, repeatedReceive, repeatedUse, serviceThreshold, startTime, superimposed, tradeScene, usageTerm, useThreshold } = res
        const term = effectiveDuration ? 2 : 1
        let usageTermArr = []
        const reg = /\[.*?\]/
        if (usageTerm && reg.test(usageTerm)) {
            usageTermArr = JSON.parse(usageTerm)
        }
        if (usageTerm && !reg.test(usageTerm)) {
            usageTermArr = [usageTerm]
        }
        usageTermList.value = usageTermArr.map(item => ({ usageTerm: item }))
        detailForm.value = {
            amCouponProjectList: isCopy ? [] : amCouponProjectList,
            amountThreshold,
            couponDescription,
            couponName,
            discountAmount,
            effectiveDuration,
            endTime: endTime ?? '',
            expiredNotice,
            getCouponCount,
            id,
            levelCover,
            levelThreshold,
            noticeThreshold,
            offerDescription,
            plate,
            plateIds,
            plateLast,
            plateName,
            projectCover,
            projectId: isCopy ? [] : amCouponProjectList.map(item => ([item.companyId, item.projectId])),
            quantity: isCopy ? 100000 : Number(quantity),
            receiveDescription,
            repeatedReceive,
            repeatedUse,
            serviceThreshold,
            startTime: startTime ?? '',
            superimposed,
            term,
            timeRange: startTime && endTime ? [startTime, endTime] : [],
            tradeScene: tradeScene ?? '',
            usageTerm: [],
            useThreshold,
        }
        if (projectCover === 1)
            detailForm.value.projectId = []
    })
}

// 校验调用
function validHolder(type, field, val, value, callback) {
    if (type === 'str' && field === val && !value) {
        return callback(new Error('请输入'))
    }
    else if (type === 'arr' && field === val && !value?.length) {
        return callback(new Error('请选择'))
    }
    else {
        callback()
    }
}

// 获取业务模块列表
function getBusinessModules() {
    getBusinessBlocksList().then((res) => {
        businessModulesList.value = res || []
    })
}

// 获取项目列表
function getProjectList() {
    getProjects().then((res) => {
        projectList.value = res
    })
}

// 获取会员等级类别
function getMemberLevelList() {
    getMemberLevel().then((res) => {
        levelList.value = res
    })
}

// 递归获取所选项目列表
function setProject(list, projects) {
    list.forEach((item) => {
        if (projects.includes(item.companyId)) {
            detailForm.value.amCouponProjectList.push({
                companyId: item.companyId,
                companyName: item.companyName,
                level: item.level,
                plate: detailForm.value.plate,
                plateName: detailForm.value.plateName,
                projectId: item.projectId,
                projectUnit: item.projectUnit,
                projectUnitId: item.projectUnitId,
            })
        }
        if (item.projectVOS) {
            setProject(item.projectVOS, projects)
        }
    })
}

function projectChange(vals) {
    // 后台要求只有动过部分项目就不传needCopy字段
    needCopy.value = false
    detailForm.value.amCouponProjectList = []
    const values = vals.flat(Infinity)
    selctProject.value = [...new Set(values)]
}

// 禁用二进制中的 'e'、'E'、'-'以及如果是整数integer就阻止小数点的输入
function onKeyPress(event, integer) {
    const key = event.key
    if ((integer && key === '.') || key === 'e' || key === 'E' || key === '-') {
        event.preventDefault()
    }
}

// 递归获取plateName
function setBusinessModules(list, businessModules) {
    list.forEach((item) => {
        if (businessModules.includes(item.value)) {
            detailForm.value.tradeScene += `${item.label}/`
        }
        if (item.children) {
            setBusinessModules(item.children, businessModules)
        }
    })
}

function businessModulesChange(vals) {
    const currentPlate = businessModulesList.value.find(item => item.value === vals[0])
    if (currentPlate)
        detailForm.value.plateName = currentPlate.label
    detailForm.value.tradeScene = ''
    setBusinessModules(businessModulesList.value, vals)
}

// radio切换调用逻辑
function changeRadio(FormField, val, otherField, currentField) {
    if (FormField === val) {
        detailForm.value[otherField] = undefined
    }
    else {
        detailForm.value[currentField] = undefined
    }
}

function addUsageTerm() {
    usageTermList.value.push({
        usageTerm: undefined,
    })
}

function removeUsageTerm(index) {
    usageTermList.value.splice(index, 1)
}

function timeRangeChange(val) {
    detailForm.value.startTime = `${val[0]} 00:00:00`
    detailForm.value.endTime = `${val[1]} 23:59:59`
}

/**
 * methods end
 */
</script>

<template>
    <div class="activity-coupon-detail">
        <el-button type="info"
                   plain
                   @click="go(-1)"
        >
            返回列表
        </el-button>

        <div class="detail-content">
            <el-form ref="detailFormRef"
                     :model="detailForm"
                     :rules="detailRules"
                     label-width="auto"
                     class="detail-form"
                     label-position="top"
            >
                <div class="base-info">
                    <h3 class="title">
                        基本信息
                    </h3>

                    <div class="form-row">
                        <el-form-item label="优惠券名称"
                                      prop="couponName"
                        >
                            <el-input v-model.trim="detailForm.couponName"
                                      clearable
                            />
                        </el-form-item>

                        <el-form-item label="业务板块"
                                      prop="plateIds"
                        >
                            <el-cascader v-model="detailForm.plateIds"
                                         :disabled="isEdit"
                                         :options="businessModulesList"
                                         @change="businessModulesChange"
                            />
                        </el-form-item>
                    </div>

                    <div class="form-row">
                        <el-form-item label="优惠金额"
                                      class="unit-append"
                                      prop="discountAmount"
                        >
                            <el-input-number v-model="detailForm.discountAmount"
                                             :disabled="isEdit"
                                             style="width: 180px"
                                             :max="999999"
                                             :precision="0"
                                             :controls="false"
                                             @keypress="onKeyPress"
                            />

                            <span class="append-txt">元</span>
                        </el-form-item>

                        <el-form-item label="发放数量"
                                      class="unit-append"
                                      prop="quantity"
                        >
                            <el-input-number v-model="detailForm.quantity"
                                             :disabled="isEdit"
                                             :min="1"
                                             :controls="false"
                                             style="width: 180px"
                                             @keypress="(e) => onKeyPress(e, 'integer')"
                            />

                            <span class="append-txt">张</span>
                        </el-form-item>
                    </div>

                    <div class="form-row">
                        <el-form-item label="叠加情况"
                                      prop="superimposed"
                        >
                            <el-select v-model="detailForm.superimposed"
                                       :disabled="isEdit"
                                       clearable
                                       placeholder="请选择"
                            >
                                <el-option label="不可叠加"
                                           :value="0"
                                />

                                <el-option label="可叠加其他类型的优惠"
                                           :value="1"
                                />
                            </el-select>
                        </el-form-item>

                        <el-form-item />
                    </div>

                    <div class="form-row">
                        <el-form-item label="优惠券描述"
                                      prop="couponDescription"
                        >
                            <el-input v-model.trim="detailForm.couponDescription"
                                      clearable
                                      maxlength="200"
                                      show-word-limit
                            />
                        </el-form-item>
                    </div>

                    <div class="form-row">
                        <el-form-item label="选择项目"
                                      prop="projectCover"
                                      class="select-project"
                        >
                            <el-radio-group v-model="detailForm.projectCover"
                                            :disabled="isEdit"
                                            @change="changeRadio(detailForm.projectCover, 1, 'projectId', undefined)"
                            >
                                <!-- <el-radio :value="1">
                                    全部项目
                                </el-radio> -->

                                <el-radio :value="2">
                                    部分项目
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>

                    <div class="form-row">
                        <el-form-item prop="projectId">
                            <el-cascader v-model="detailForm.projectId"

                                         :disabled="detailForm.projectCover === 1 || isEdit"
                                         :props="{
                                             multiple: true,
                                             checkStrictly: true,
                                             value: 'companyId',
                                             label: 'companyName',
                                             children: 'projectVOS',
                                         }"
                                         clearable
                                         filterable
                                         :options="projectList"
                                         @change="projectChange"
                            />
                        </el-form-item>

                        <el-form-item />
                    </div>

                    <div class="form-row">
                        <el-form-item label="使用门槛"
                                      prop="serviceThreshold"
                        >
                            <el-radio-group v-model="detailForm
                                                .serviceThreshold"
                                            :disabled="isEdit"
                                            @change="changeRadio(detailForm.serviceThreshold, 1, 'amountThreshold', undefined)"
                            >
                                <el-radio :value="1">
                                    无门槛
                                </el-radio>

                                <el-radio :value="2"
                                          class="radio-append"
                                >
                                    <span>订单满</span>

                                    <el-form-item class="append"
                                                  prop="amountThreshold"
                                    >
                                        <el-input-number v-model="detailForm.amountThreshold"
                                                         style="width: 100px"
                                                         :controls="false"
                                                         :disabled="detailForm.serviceThreshold === 1 || isEdit"
                                                         @keypress="onKeyPress"
                                        />

                                        <span class="append-txt">元可用</span>
                                    </el-form-item>
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>

                    <div class="form-row">
                        <el-form-item label="有效期"
                                      prop="term"
                        >
                            <el-radio-group v-model="detailForm.term"
                                            :disabled="isEdit"
                                            @change="changeRadio(detailForm.term, 1, 'effectiveDuration', 'timeRange')"
                            >
                                <el-radio :value="1">
                                    <el-form-item class="append"
                                                  prop="timeRange"
                                    >
                                        <el-date-picker v-model="detailForm.timeRange"
                                                        :disabled="isEdit"
                                                        type="daterange"
                                                        start-placeholder="开始时间"
                                                        end-placeholder="结束时间"
                                                        format="YYYY-MM-DD"
                                                        value-format="YYYY-MM-DD"
                                                        @change="timeRangeChange"
                                        />
                                    </el-form-item>
                                </el-radio>

                                <el-radio :value="2"
                                          disabled
                                          class="radio-append"
                                >
                                    <span>领取后</span>

                                    <el-form-item class="append"
                                                  prop="effectiveDuration"
                                    >
                                        <el-input-number v-model="detailForm.effectiveDuration"
                                                         style="width: 100px"
                                                         :controls="false"
                                                         :disabled="detailForm.term === 1 || isEdit"
                                                         @keypress="onKeyPress"
                                        />

                                        <span class="append-txt">天内可用</span>
                                    </el-form-item>
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>

                    <div class="form-row">
                        <el-form-item label="领取等级"
                                      prop="levelCover"
                        >
                            <el-radio-group v-model="detailForm.levelCover"
                                            :disabled="isEdit"
                                            @change="changeRadio(detailForm.levelCover, 1, 'levelThreshold', undefined)"
                            >
                                <el-radio :value="1">
                                    全部会员
                                </el-radio>

                                <el-radio :value="2"
                                          class="radio-append"
                                >
                                    <span>部分会员</span>

                                    <el-form-item prop="levelThreshold">
                                        <el-select v-model="detailForm.levelThreshold"
                                                   clearable
                                                   :disabled="detailForm.levelCover === 1 || isEdit"
                                                   placeholder="请选择"
                                                   style="width: 140px;margin: 0 6px;"
                                        >
                                            <el-option v-for="level in levelList"
                                                       :key="level.levelCode"
                                                       :label="level.levelName"
                                                       :value="level.levelCode"
                                            />
                                        </el-select>

                                        <span class="append-txt">及以上可领取</span>
                                    </el-form-item>
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>

                    <div class="form-row">
                        <el-form-item label="领取数量"
                                      prop="repeatedReceive"
                        >
                            <el-radio-group v-model="detailForm.repeatedReceive"
                                            :disabled="isEdit"
                                            @change="changeRadio(detailForm.repeatedReceive, 1, 'getCouponCount', undefined)"
                            >
                                <el-radio :value="1">
                                    无限制
                                </el-radio>

                                <el-radio :value="0"
                                          class="radio-append"
                                >
                                    <span>每个账号最多可领取</span>

                                    <el-form-item class="append"
                                                  prop="getCouponCount"
                                    >
                                        <el-input-number v-model="detailForm.getCouponCount"
                                                         :controls="false"
                                                         :disabled="detailForm.repeatedReceive === 1 || isEdit"
                                                         style="width: 120px"
                                                         @keypress="(e) => onKeyPress(e, 'integer')"
                                        />

                                        <span class="append-txt">张</span>
                                    </el-form-item>
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>

                    <div class="form-row">
                        <el-form-item label="单次使用数量"
                                      prop="repeatedUse"
                        >
                            <el-radio-group v-model="detailForm.repeatedUse"
                                            :disabled="isEdit"
                                            @change="changeRadio(detailForm.repeatedUse, 0, 'useThreshold', undefined)"
                            >
                                <el-radio :value="0">
                                    无限制
                                </el-radio>

                                <el-radio :value="1"
                                          class="radio-append"
                                >
                                    <span>最多可使用</span>

                                    <el-form-item class="append"
                                                  prop="useThreshold"
                                    >
                                        <el-input-number v-model="detailForm.useThreshold"
                                                         :controls="false"
                                                         :disabled="detailForm.repeatedUse === 0 || isEdit"
                                                         style="width: 120px"
                                                         @keypress="(e) => onKeyPress(e, 'integer')"
                                        />

                                        <span class="append-txt">张</span>
                                    </el-form-item>
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </div>

                <div class="other-info">
                    <h3 class="title">
                        其他信息
                    </h3>

                    <div class="form-row">
                        <el-form-item label="过期提醒"
                                      prop="expiredNotice"
                        >
                            <el-radio-group v-model="detailForm.expiredNotice"
                                            :disabled="isEdit"
                                            @change="changeRadio(detailForm.expiredNotice, 1, 'noticeThreshold', undefined)"
                            >
                                <el-radio :value="1">
                                    不提醒
                                </el-radio>

                                <el-radio :value="2"
                                          class="radio-append"
                                >
                                    <span>距离到期前</span>

                                    <el-form-item class="append"
                                                  prop="noticeThreshold"
                                    >
                                        <el-input-number v-model="detailForm.noticeThreshold"
                                                         :controls="false"
                                                         :disabled="detailForm.expiredNotice === 1 || isEdit"
                                                         style="width: 120px"
                                                         @keypress="onKeyPress"
                                        />

                                        <span class="append-txt">天提醒</span>
                                    </el-form-item>
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>

                    <div class="form-row textarea-form">
                        <el-form-item label="领取说明">
                            <el-input v-model.trim="detailForm.receiveDescription"
                                      type="textarea"
                                      clearable
                                      maxlength="200"
                                      show-word-limit
                                      placeholder="请输入"
                            />
                        </el-form-item>

                        <el-form-item label="优惠说明">
                            <el-input v-model.trim="detailForm.offerDescription"
                                      type="textarea"
                                      maxlength="200"
                                      show-word-limit
                                      placeholder="请输入"
                            />
                        </el-form-item>
                    </div>

                    <div class="form-row">
                        <el-form-item label="使用须知">
                            <!-- <el-input v-model.trim="detailForm.usageTerm"
                                      type="textarea"
                                      maxlength="200"
                                      show-word-limit
                                      placeholder="请输入"
                            /> -->
                            <div class="explain-list">
                                <div v-for="(item, index) in usageTermList"
                                     :key="index"
                                     class="item"
                                >
                                    <span>{{ index + 1 }}、</span>

                                    <el-input v-model.trim="item.usageTerm"
                                              clearable
                                              maxlength="200"
                                              show-word-limit
                                              placeholder="请输入"
                                    />

                                    <div class="btns">
                                        <el-icon class="add-icon"
                                                 @click="addUsageTerm"
                                        >
                                            <Plus />
                                        </el-icon>

                                        <el-icon v-if="usageTermList.length > 1"
                                                 class="delete-icon"
                                                 @click="removeUsageTerm(index)"
                                        >
                                            <Delete />
                                        </el-icon>
                                    </div>
                                </div>
                            </div>
                        </el-form-item>

                        <div class="el-form-item" />
                    </div>
                </div>
            </el-form>
        </div>

        <div class="footer-btn">
            <el-form-item>
                <el-button type="primary"
                           @click="submitForm(detailFormRef)"
                >
                    保存
                </el-button>

                <el-button @click="go(-1)">
                    取消
                </el-button>
            </el-form-item>
        </div>
    </div>
</template>

<style lang="less" scoped>
.activity-coupon-detail {
    .detail-content {
        width: calc(90% - 300px);
        .title {
            font-size: 20px;
            font-weight: 600;
            margin: 30px 0 12px 0;
        }
        .detail-form {
            .form-row {
                display: flex;
                .unit-append {
                    .append-txt {
                        display: block;
                        margin-left: 6px;
                        width: 150px;
                        color: rgb(96, 98, 102);
                    }
                }
                &.textarea-form {
                    :deep(.el-textarea__inner) {
                        height: 60px;
                        resize: none;
                    }
                }
                .el-form-item {
                    margin-right: 12px;
                    flex: 1;
                }
                .select-project {
                    margin-bottom: 0;
                }
                :deep(.el-cascader) {
                    width: 100%;
                }
                .explain-list {
                    flex: 1;
                    > .item {
                        display: flex;
                        margin-bottom: 12px;
                        .btns {
                            display: flex;
                            align-items: center;
                            .el-icon {
                                cursor: pointer;
                            }
                            .add-icon {
                                color: var(--el-color-primary);
                                margin: 0 6px;
                            }
                        }
                    }
                }
            }
            .radio-append {
                :deep(.el-radio__label) {
                    display: flex;
                }
                :deep(.el-form-item__content) {
                    display: flex;
                }
                .append {
                    display: flex;
                    align-items: center;
                    margin-left: 6px;
                    .append-txt {
                        display: block;
                        margin-left: 6px;
                        width: 150px;
                    }
                }
            }
        }
    }
    .footer-btn {
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }
}
</style>
